var menu = [];

window.onload = function () {
    function isLogin() {
        if (localStorage.hasOwnProperty("UserName")) {
            document.getElementById("login").style.display = 'none';
            document.getElementById("login-out").style.display = 'block';
            document.getElementById("profile").style.display = 'block';
            document.getElementById('property').style.display = 'block';
            document.querySelector("#profile a").innerHTML = 'User: ' + localStorage.getItem('UserName');
        }
        else {
            document.getElementById("login-out").style.display = 'none';
            document.getElementById("login").style.display = 'block';
            document.getElementById("profile").style.display = 'none';
            document.getElementById('property').style.display = 'none';
        }
    }
    isLogin();

    function ok() {
        console.log(this.responseText);
        let json_string = this.responseText;
        let res_object = JSON.parse(json_string);
        for (var i = 0; i < res_object.length; i++) {
            menu.push(res_object[i].category);
        }
        menu.push('random');
        initCategoryMenu();
    }

    function ko() {
        console.log(this.responseText);
        alert("Something wrong with get category");
    }

    function getCategoy() {
        ajaxRequest("../php/getCategory.php", 'get', null, ok, ko);
    }

    function initCategoryMenu() {
        let catmenu = document.getElementById("Category");
        var label = document.createElement("label");
        label.innerHTML = 'Category: ';
        catmenu.appendChild(label);

        for (var i = 0; i < menu.length; i++) {
            var input = document.createElement("input");
            input.setAttribute('type', 'radio');
            input.setAttribute('name', 'option1');
            input.setAttribute('value', menu[i]);
            if (!i) {
                input.setAttribute('checked', 'checked');
            }
            catmenu.appendChild(input);

            var sublabel = document.createElement("label");
            sublabel.innerHTML = menu[i] + "&thinsp;";
            catmenu.appendChild(sublabel);
        }
        catmenu.append(document.createElement('br'));
        catmenu.append(document.createElement('br'));
    }

    function submit() {
        let historyurl = '../php/recordhistory.php?';
        var cat = document.getElementsByName("option1");
        for (var i = 0; i < cat.length; i++) {
            if (cat[i].checked) {
                localStorage.setItem('category', cat[i].value);
                historyurl += 'category=' + cat[i].value;
                break;
            }
        }

        var level = document.getElementsByName("option2");
        for (var i = 0; i < level.length; i++) {
            if (level[i].checked) {
                localStorage.setItem('level', level[i].value);
                historyurl += '&level=' + level[i].value;
                break;
            }
        }

        var size = document.getElementsByName("option3");
        for (var i = 0; i < size.length; i++) {
            if (size[i].checked) {
                localStorage.setItem('size', size[i].value);
                historyurl += '&size=' + size[i].value;
                break;
            }
        }

        function check_time() {
            var time = document.getElementsByName("option4");
            if (time[1].checked) {
                if (document.getElementById("countdown").value > 20 || document.getElementById("countdown").value < 5) {
                    alert("Invaild! Please enter the time limit between 5 and 20");
                    return false;
                }
                else {
                    var times = document.getElementById("countdown");
                    localStorage.setItem('countdown', times.value);
                    historyurl += '&timelimit=' + times.value;
                    return true;
                }

            }
            if (time[0].checked) {
                historyurl += '&timelimit=' + 300000000;
                localStorage.setItem('countdown', 300000000);
                return true;
            }
        }


        var property = document.getElementsByName("option5");
        for (var i = 0; i < property.length; i++) {
            if (property[i].checked) {
                localStorage.setItem('property', property[i].value);
                break;
            }
        }


        var cat = localStorage.getItem("category");
        var level = localStorage.getItem("level");
        var size = localStorage.getItem("size");
        var property = localStorage.getItem('property');


        function ok() {
            console.log(this.responseText);
            localStorage.setItem("json_quiz", this.responseText);
            localStorage.setItem("index", 0);
            window.location.href = '../html/quiz.html';
        }

        function ko() {
            console.log(this.responseText);
            alert("Something wrong with get question from datebase");
        }
        function getQuestions() {
            var sec = localStorage.getItem('countdown');
            let url = "../php/getAllQuizQuestion.php?option1=" + cat + "&property=" + property + "&option2=" + level + "&option3=" + size;
            if (sec >= 5 && sec <= 20) {
                url = url + "&countdown=" + sec;
            }
            ajaxRequest(url, 'get', null, ok, ko);
        }
        if (check_time()) {
            localStorage.setItem('recordhistory_url', historyurl);
            getQuestions();
        }
    }



    getCategoy();
    document.getElementById("quiz-submit").onclick = submit;
    document.getElementById('time_no').addEventListener("click", function () {
        document.getElementById('countdown-div').style.display = 'none';
    });
    document.getElementById('time_yes').addEventListener("click", function () {
        document.getElementById('countdown-div').style.display = '';
    });
    let time = document.getElementsByName("option4");
    if (time[1].checked) {
        document.getElementById('countdown-div').style.display = '';
    }

}